<template>
	<view class="container">
		<view class="header align-center justify-between plr14 ft16">
			<view class="clamp">
				华安宝在线培训服务平台
			</view>
			<image src="../../static/images/notice.png" mode="widthFix"></image>
		</view>
		<view class="mb15" style="height: 110rpx;">

		</view>
		<view class="plr15">
			<uv-swiper :list="banner" height="200"></uv-swiper>


			<view class="bgWhite grid radius8 mt10">
				<navigator hover-class="none" url="/pages/category/index" class="griditem flex-col align-center justify-center">
					<image src="../../static/images/nav1.png" mode="widthFix"></image>
					三项岗位人员
				</navigator>
				<navigator hover-class="none" url="/pages/category/index" class="griditem flex-col align-center justify-center">
					<image src="../../static/images/nav2.png" mode="widthFix"></image>
					全员培训
				</navigator>
				<navigator hover-class="none" url="/pages/category/index" class="griditem flex-col align-center justify-center">
					<image src="../../static/images/nav3.png" mode="widthFix"></image>
					复工复产
				</navigator>
				<navigator hover-class="none" url="/pages/category/index" class="griditem flex-col align-center justify-center">
					<image src="../../static/images/nav4.png" mode="widthFix"></image>
					注册安全工程师
				</navigator>
				<navigator hover-class="none" url="/pages/category/index" class="griditem flex-col align-center justify-center">
					<image src="../../static/images/nav5.png" style="width: 44rpx;margin-bottom: 16rpx;"
						mode="widthFix"></image>
					职业健康
				</navigator>
				<navigator hover-class="none" url="/pages/category/index" class="griditem flex-col align-center justify-center">
					<image src="../../static/images/nav6.png" style="width: 44rpx;margin-bottom: 16rpx;"
						mode="widthFix"></image>
					专项培训
				</navigator>
				<navigator hover-class="none" url="/pages/category/index" class="griditem flex-col align-center justify-center">
					<image src="../../static/images/nav7.png" style="width: 44rpx;margin-bottom: 16rpx;"
						mode="widthFix"></image>
					职业技能提升
				</navigator>
			</view>

			<view class="align-center justify-between mt20">
				<image style="width: 38rpx;" src="../../static/images/tit_img1.png" mode="widthFix"></image>
				<view class="flex1 ft20 ml5">
					三项岗位人员
				</view>
				<navigator url="/pages/category/index" hover-class="none" class="align-center lookmore">
					<text class="mr5"> 查看更多</text> <uv-icon size="12" name="arrow-right"></uv-icon>
				</navigator>
			</view>
			<view class="pxList flex-wrap justify-between">
				<view class="bgWhite posRelative plr10 ptb10 pxitem " v-for="i in cateList1 " @click="toMain(i)">
					<image :src="$domain.ossapi+i.image" mode=""></image>
			
				<view class="clamp3">
					{{i.title}}
				</view>
				<text>全员培训</text>
				
				<view class="allPeo posAbsort">
					全员
				</view>
				</view>
			
			</view>
			<view class="align-center justify-between mt20">
				<image style="width: 38rpx;" src="../../static/images/tit_img1.png" mode="widthFix"></image>
				<view class="flex1 ft20 ml5">
					全员培训
				</view>
				<navigator url="/pages/category/index" hover-class="none" class="align-center lookmore">
					<text class="mr5"> 查看更多</text> <uv-icon size="12" name="arrow-right"></uv-icon>
				</navigator>
			</view>
			<view class="pxList flex-wrap justify-between">
				<view class="bgWhite posRelative plr10 ptb10 pxitem " v-for="i in cateList2 " @click="toMain(i)">
					<image :src="$domain.ossapi+i.image" mode=""></image>

					<view class="clamp3">
						{{i.title}}
					</view>
					<text>全员培训</text>

					<view class="allPeo posAbsort">
						全员
					</view>
				</view>

			</view>
			
			<view class="align-center justify-between mt20">
				<image style="width: 38rpx;" src="../../static/images/tit_img2.png" mode="widthFix"></image>
				<view class="flex1 ft20 ml5">
					新闻资讯
				</view>
				<navigator url="/pages/course/index" hover-class="none" class="align-center lookmore">
					<text class="mr5"> 查看更多</text> <uv-icon size="12" name="arrow-right"></uv-icon>
				</navigator>
			</view>
			<view class="align-center justify-between mt20">
				<image style="width: 38rpx;" src="../../static/images/tit_img2.png" mode="widthFix"></image>
				<view class="flex1 ft20 ml5">
					通知公告
				</view>
				<navigator url="/pages/course/index" hover-class="none" class="align-center lookmore">
					<text class="mr5"> 查看更多</text> <uv-icon size="12" name="arrow-right"></uv-icon>
				</navigator>
			</view>
			<view class="align-center justify-between mt20 pb30">
				<image style="width: 38rpx;" src="../../static/images/tit_img2.png" mode="widthFix"></image>
				<view class="flex1 ft20 ml5">
					政策法规
				</view>
				<navigator url="/pages/course/index" hover-class="none" class="align-center lookmore">
					<text class="mr5"> 查看更多</text> <uv-icon size="12" name="arrow-right"></uv-icon>
				</navigator>
			</view>
		</view>



	</view>
</template>

<script>
	let app = getApp();
	export default {
		components: {

		},
		data() {
			return {
				cateList1:[],
				cateList2:[],
				banner:[],
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		onLoad(opt) {


		},
		mounted() {

				this.init()

			// 使用函数生成一个正弦波形


		},

		methods: {
			toMain(item){
				uni.navigateTo({
					url:'/pages/courseDetail/index?id='+item.id
				})
			},
			init(){
				this.$api.getCate().then(res=>{
					console.log(res)
				})
				this.$api.getInfo({cate_id:1}).then(res=>{
					console.log(res)
					this.cateList1=res.data
				})
				this.$api.getInfo({cate_id:2}).then(res=>{
					console.log(res)
					this.cateList2=res.data
					
				})
				this.$api.readConfig({configName:'banner'}).then(res=>{
					console.log(res)
						
					this.banner=res.data.banner.map(item=>{
						return this.$domain.ossapi+item
					})
				})
				
				
			}
		}





	}
</script>
<style scoped lang="scss">
	page {
		color: #343434;
	}

	.header {
		width: 100%;
		height: 110rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		color: #38393B;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: flex;

		image {
			width: 42rpx;
		}
	}

	.grid {
		box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
		height: 340rpx;
		font-size: 24rpx;
		color: #343434;

		.griditem {
			width: 25%;
			height: 170rpx;
			display: inline-flex !important;
		}

		image {
			width: 90rpx;
		}
	}

	.lookmore {
		color: #B6B6B6;
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.pxitem {
		box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
		margin-top: 20rpx;
		width: 335rpx;
		box-sizing: border-box;
		border-radius: 18rpx;
		color: #969696;
		font-size: 24rpx;

		view {
			font-size: 30rpx;
			color: #38393B;
			margin: 20rpx 0 30rpx;
		}

		image {
			width: 100%;
			height: 246rpx;
			border-radius: 18rpx;
		}

		.allPeo {
			position: absolute;
			color: #06355B;
			background-color: rgba(255, 219, 109, .95);
			top: 20rpx;
			right: 70rpx;
			margin: 0;
			line-height: 1;
			width: 40rpx;
			text-align: center;
		}
	}
</style>